<template>
    <div @click.stop="noClick" class="DayOrNightRoot">
        <el-switch
        @click="DayOrNight_main"
        v-model="DayOrNight_button"
        style="margin-left: 24px"
        inline-prompt
        :active-icon="UI.Sunny"
        :inactive-icon="UI.Moon"
  />
    </div>
</template>
<script setup>
import * as UI from "@element-plus/icons-vue"
import { watch,ref,getCurrentInstance,computed } from "vue"

// 公共变量中转站
let global_Object = getCurrentInstance().appContext.config.globalProperties

let DayOrNight_button = ref( global_Object.$theme.value );

watch(global_Object.$theme,(newValue)=>{
    DayOrNight_button.value = newValue.value
})

function noClick(){

}

function DayOrNight_main(){
    global_Object.$theme.value = !global_Object.$theme.value
}
</script>
<style lang="less" scoped>
.DayOrNightRoot {
    width: 100%;
    height: 100%;
    text-align: center;
}
</style>